<template>
    <div style="height:100%;">
        <navbar :title="this.$route.query.title" ></navbar>
        <div class="content" style="padding-bottom: 56px;">
            <div class="modal-title-box">{{ $t('online_learning_content') }}</div>
            <div v-for="(item, index) in dataList" :key="index" class="list-item">
                <div class="item-text">
                    <div class="base-info">
                        <div class="user-group">
                            <i class="iconfont icon-24gf-play"></i>
                        </div>
                        <div class="name">{{item.resTitle || '--'}}</div>
                    </div>
                    <div class="appovel-title">
                        <i class="iconfont icon-leixing"></i>
                        <span>{{conType[item.resTypeStr]}}</span>
                    </div>
                    <div class="appovel-title">
                        <i class="iconfont icon-w_time"></i>
                        <span>
                            {{ item.resStartTime.slice(0,item.resStartTime.length-3)}} {{$t('time_to')}} {{ item.resEndTime.includes('9999') ? $t('mod_unlimit') : item.resEndTime.slice(0,item.resEndTime.length-3)}}
                        </span>
                    </div>
                    <div v-if="item.resStatus==='OFF'" class="appovel-title">
                        <i class="iconfont icon-weifabu" style="color: #FFAE52;"></i>
                        <span>{{$t('lab_unpublished')}}</span>
                    </div>
                    <div v-else class="appovel-title">
                        <i class="iconfont icon-yifabu" style="color: #32B16C;"></i>
                        <span>{{$t('lab_published')}}</span>
                    </div>
                </div>
                <div class="button-box">
                    <div v-if="item.resStatus==='OFF'" class="pass-btn" @click="handleAllow(item.resId)">{{ $t('btn_publish') }}</div>
                    <div v-else class="refuse-btn" @click="handleRefuse(item.resId)">{{ $t('cancel_publish') }}</div>
                </div>
            </div>
            <!--暂无数据-->
            <div v-if="dataList.length === 0" style="height:100%;">
                <div class="box-table" style="width:100%;height:100%;">
                    <div class="box-table-cell" style="text-align: center;">
                        <div class="no-data">
                            <img src="../../../../static/images/no-data.png" alt=""/>
                            <p class="color999">{{ $t("no_data") }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 确定发布吗？ -->
        <van-dialog
            v-model="comfirmModal"
            show-cancel-button
            :title="$t('sure_pass_publish')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="handleAllowComfirm">
        </van-dialog>
        <!-- 确定取消发布吗？ -->
        <van-dialog
            v-model="refuseComfirmModal"
            show-cancel-button
            :title="$t('sure_refuse_publish')"
            :confirmButtonText="$t('sure')"
            :cancelButtonText="$t('cancel')"
            @confirm="handleRefuseComfirm">
        </van-dialog>
    </div>
  </template>

<script>
import { Tab, Tabs, Toast } from 'vant';
export default {
    name: 'courseManageDetail',
    components: {
        [Tab.name]: Tab,
        [Tabs.name]: Tabs,
        vanToast: Toast
    },
    data() {
        return {
            itmId: this.$route.query.itmId,
            dataList: [],
            comfirmModal: false,
            refuseComfirmModal: false,
            curItemId: null,
            conType: { //模块类型
                TST: this.$t('mod_TST'), //静态测验
                DXT: this.$t('mod_DXT'), //动态测验
                ASS: this.$t('mod_ASS'), //作业
                SVY: this.$t('mod_SVY'), //课程评估问卷
                VOD: this.$t('mod_VOD'), //视频点播
                AUD: this.$t('mod_AUD'), //音频点播
                SCO: this.$t('mod_SCO'), //SCORM课件
                RDG: this.$t('mod_RDG'), //教材
                REF: this.$t('mod_REF'), //参考
                ACE: this.$t('mod_ACE'), // 问卷最新
                SCLASS: this.$t('SCLASS') // 微课
            }
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            this.$axios.get(`/app/api/course/mobile/manage/online/${this.itmId}`).then((res) => {
                this.dataList = res.data;
            });
        },
        checkTab() {
            // this.getList('refresh');
        },
        backFun() {
            this.$router.go(-1);
        },
        // 发布单行
        handleAllow(resId) {
            this.comfirmModal = true;
            this.curItemId = resId;
        },
        // 发布单行再次确认
        handleAllowComfirm() {
            const data = {
                resId: this.curItemId,
                operate: 'ON'
            };
            this.approvalApp(data);
        },
        // 取消发布单行
        handleRefuse(resId) {
            this.refuseComfirmModal = true;
            this.curItemId = resId;
        },
        // 取消发布单行再次确认
        handleRefuseComfirm() {
            const data = {
                resId: this.curItemId,
                operate: 'OFF'
            };
            this.approvalApp(data);
        },
        approvalApp(data) {
            this.$axios.put(`/app/api/course/mobile/manage/publish`, {}, {params: data}).then((res) => {
                this.getList();
                this.comfirmModal = false;
                this.refuseComfirmModal = false;
                Toast({message: this.$t('opreat_successs'), forbidClick: true});
            });
        }
    }
};
</script>

<style scoped lang='less'>
.head-icon {
    font-size: 25px;
    margin: 17px 0 0 11px;
}
.modal-title-box{
    height: 44px;
    line-height: 44px;
    background: white;
    color: #075EBB;
    font-size: 15px;
    // padding-left: 15px;
    text-align: center;
}
.list-item{
    background: white;
    border-radius: 3px;
    margin: 15px;
    padding: 15px 20px 30px;
    position: relative;
    .item-text{
        .base-info{
            display: flex;
            // justify-content: space-between;
          align-items: center;
            margin-bottom: 20px;
            .name{
                font-size: 15px;
                color: #333333;
                width: 80%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
                text-overflow: ellipsis;
                // height: 40px;
            }
            .user-group{
                font-size: 12px;
                margin-right: 15px;
                i{
                color: #075EBB;
                }
            }
        }
        .appovel-title{
            display: flex;
            margin-bottom: 10px;
            align-items: center;
            i{
                color: #C9C9C9;
                font-size: 18px;
            }
            span{
                margin-left: 8px;
                font-size: 12px;
                color: #666666;
            }
        }
    }
    .button-box{
        padding-top: 10px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        bottom: 15px;
        right: 20px;
        div{
                font-size: 14px;
                border-radius: 3px;
                display: inline-block;
                width: 94px;
                height: 31px;
                text-align: center;
                line-height: 31px;
                box-sizing: border-box;
        }
        .pass-btn{
            border: 1px solid #075EBB;
            color: #075EBB;
        }
        .refuse-btn{
            margin-left: 15px;
            border: 1px solid #E63442;
            color: #E63442;
        }
    }
}
</style>
